<template>
	<view class="earlyWarning">
		<view class="mail_List">
			<view class="mail" style="font-weight: 700;">
				<view class="order">物品借用</view>
			</view>
		</view>
		<view class="icon">
			<u-icon name="arrow-left" color="#fefefe" size="40" @click="navigateBack"></u-icon>
		</view>
		<!-- 第一个tab栏 -->
		<view class="" style="height: 76rpx;">
			<view class="" style="width: 100%;  z-index: 99;">
				<u-tabs :list="list" :is-scroll="false" :current="current" bar-width="160" @change="change"></u-tabs>
			</view>
		</view>
		<view class="" style="height: 26rpx; background-color: #f2f2f2;">
		</view>
		<!-- 第二个tab栏 -->
		<u-tabs class="tabs" :list="list2" item-width="160rpx" :show-bar="false" :current="current2" @change="change2" v-if="current==0">
		</u-tabs>
		<!-- 第二个tab栏内容第一行 -->
		<view class="gate" @click="warehouse(item.goodsId)" v-for="(item,index) in application" :key=index v-if="(current==0&&current2==0)||current2==1">
			<view class="gate_left">
				<!-- <image src="../../../static/workOrder/Group1035.png" mode=""></image> --> 
				<view class=""
					style="display: flex;flex-direction: column;justify-content: space-evenly; height: 90rpx; margin-left: 20rpx;">
					<view style="font-size: 36rpx;"><text>{{item.goodsName}}</text><text
							style="margin-left: 26rpx; font-size: 22rpx;color: #999;">{{item.goodsNumber}}</text></view>
					<text style="font-size: 22rpx;color: #999;">{{item.goodsClassify==0 ? '工具类' : '仪器类'}}</text>
				</view>
			</view>
			<view class="gate_right" style="height: 90rpx; line-height: 90rpx;">
				<text class="">
					{{item.goodsStatus=='0' ? '借用' : '存放'}}
				</text>
			</view>
		</view>
		<!-- 第二个tab栏内容第二行 -->
<!-- 		<view class="gate" @click="Borrowing" v-if="(current==0&&current2==0)||current2==1">
			<view class="gate_left">
				<image src="../../../static/workOrder/Group1035.png" mode=""></image>
				<view class=""
					style="display: flex;flex-direction: column;justify-content: space-evenly; height: 90rpx; margin-left: 20rpx;">
					<view style="font-size: 36rpx;"><text>工具箱</text><text
							style="margin-left: 26rpx; font-size: 22rpx;color: #999;">HK565165GHB</text></view>
					<text style="font-size: 22rpx;color: #999;">Y3-504室</text>
				</view>
			</view>
			<view class="gate_right" style="height: 90rpx; line-height: 90rpx;">
				<text class="">
					借用中
				</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 第一个tab栏参数
				list: [{
					name: '物品列表'
				}, {
					name: '借用申请'
				}],
				current: 0,
				// 第二个tab栏参数
				list2: [{
					name: '全部'
				}, {
					name: '工具类'
				}, {
					name: '安全类'
				}, {
					name: '消防类'
				}, {
					name: '生产类'
				}, {
					name: '其他'
				}],
				current2: 0,
				// 所有展示数据
				application:'',
			}
		},
		onLoad() {
			// 展示全部数据
			this.getRecords()
		},
		methods: {
			// 展示全部数据
			getRecords() {
				this.loginId = uni.getStorageSync("setModel")
				this.$http.get('informationInquiry/getGoodList',{loginId:this.loginId.userId}).then(res => {
					console.log(res, '课程分类')
					this.application = res.data
				})
			},
			// tab栏
			change(index) {
				this.current = index;
				console.log(this.current)
			},
			// tab栏
			change2(index) {
				this.current2 = index;
				console.log(this.current2)
			},
			// 库房中点击事件
			warehouse(goodsId) {
				this.openUrl(`/pagesA/application/itemBorrowing/holdAll/holdAll?goodsId=${goodsId}`)
			},
			// 借用中点击事件
			// Borrowing() {
			// 	this.openUrl('/pagesA/application/itemBorrowing/Borrowing/Borrowing')
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.earlyWarning {
		.mail_List {
			overflow: hidden;
			width: 100%;
			background-color: #f2f2f2;

			.mail {
				height: 160rpx;
				line-height: 230rpx;
				color: #fff;
				font-size: 40rpx;
				background-color: #2a4f65;
			}

			.order {
				text-align: center;
			}
		}

		.icon {
			position: absolute;
			top: 96rpx;
			left: 20rpx;
		}

		/deep/.tabs {
			.u-tab-item {
				height: 60rpx !important;
				line-height: 60rpx !important;
				padding: 0 !important;
				margin: 20rpx 12rpx 0;
				background-color: #F2F2F2;
				border-radius: 88rpx;
			}
		}

		.gate {
			display: flex;
			justify-content: space-between;
			margin: 12rpx 8rpx 12rpx 8rpx;
			padding: 21rpx 16rpx 21rpx 16rpx;
			border: 1px solid #E8E8E8;

			.gate_left {
				display: flex;
				// height: 100rpx;

				// background-color: red;
				image {
					width: 90rpx;
					height: 90rpx;
				}
			}
		}
	}
</style>
